<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>XuLuo</title>
	<style>
		*{margin: 0;padding: 0;font-family: 'microsoft yahei',Arial;}
		a{text-decoration: none;outline: none;}
		ul,li{list-style: none;}
		.btn{display:inline-block;padding:0 18px;height:35px;line-height:35px;background:#009688;color:#fff;font-size:14px;opacity:0.9;filter:alpha(opacity=90);font-family:'microsoft yahei';cursor:pointer;vertical-align:middle;border-radius:2px;}
		.btn:hover{opacity:1;filter:alpha(opacity=100);}
		.btn:active{opacity:0.9;filter:alpha(opacity=90);}
		/*所需css*/
		.title{height:50px;background:#eee;line-height:50px;text-align:center;}
		#icon{position:absolute;right:10px;top:12px;z-index:1000;}
		#icon span{display:block;background:#ED1C29;width:30px;height:3px;border-radius:1px;margin:4px;-webkit-transition:all 0.5s;transition:all 0.5s;}
		#icon.active span{background:#fff;}
		#icon.active .s1{-webkit-transform:rotate(45deg) translate3d(4px,4px,0);transform:rotate(45deg)translate3d(4px,4px,0);}
		#icon.active .s2{opacity:0;}
		#icon.active .s3{-webkit-transform:rotate(-45deg) translate3d(6px,-6px,0);transform:rotate(-45deg) translate3d(6px,-6px,0);}
		#nav{background:rgba(0,0,0,0.6);position:fixed;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);right:0;top:0;width:100%;height:200%;font-size:14px;z-index:100;transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);-webkit-transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);}
		#nav .bg{background:#CB2B34;width:50%;height:100%;box-sizing:border-box;padding:60px 0 0 0;position:absolute;right:0;top:0;}
		#nav a{display:inline-block;padding:6px 0 6px 5%;width:95%;color:#fff;border-bottom:1px solid #EC6E72;}
		#nav.active{-webkit-transform:translate3d(0%,0,0);transform:translate3d(0%,0,0);}
	</style>
</head>
<body>
	<div class="title">导航 
		<div id="icon">
			<span class="s1"></span>
        	<span class="s2"></span>
        	<span class="s3"></span>
		</div>
	</div>
	<div id="nav">
		<div class="bg">
			<a href="about.html">About Us</a><a href="">Latest News</a>
			<a href="">Branch Network</a><a href="">Business in Mainland China</a>
			<a href="">Bonus Points Redemption</a><a href="">MGM</a>
			<a href="">FAQ</a>
			<a href="">Latest Advertisement</a>
		</div>
	</div>
	<div class="cont" style="text-align:center;line-height:100px;">
		<a href="sideBar2.html" class="btn">点击进入侧边栏2</a>
		<a href="sideBar3.html" class="btn">点击进入侧边栏3</a>
	</div>
	<!-- 必须引入的js -->
	<script type="text/javascript">
		document.querySelector('#icon').onclick=function(e){			
			document.querySelector('#nav').classList.toggle('active');
			document.querySelector('#icon').classList.toggle('active');
			e.stopPropagation();
		};
		document.onclick=function(e){
			if(e.target.id=='nav' && document.querySelector('#nav').classList.contains('active')){				
				document.querySelector('#nav').classList.remove('active');
				document.querySelector('#icon').classList.remove('active');
			}
		};
	</script>
</body>
</html>